<template>
	<view>
		<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVideo">
			<swiper-item v-for="(item, index) in video_list" :key="index">
				<video
					:src="item.video_url"
					preload
					show-play-btn="true"
					controls="false"
					loop="true"
					:id="`video_${item.video_id}`"
					objectFit="contain"
					:enable-progress-gesture="false"
					@click="clickVideo"
					ref="video_url"
					play-btn-position="center"
					class="video"
					:poster="item.cover_url"
				></video>
				<cover-image class="play" v-if="show_play" @tap="videoPlay" src="/static/yhdsl/play.png"></cover-image>
				<cover-view class="cover-view-left">
					<text class="view-left-text">@{{ item.nickname }}</text>
					<view class="view-left-text-content">
						<text class="text-content-text">{{ item.describe }}</text>
					</view>
				</cover-view>
				<cover-view class="cover-view-right">
					<cover-image :src="item.cover_url" class="avator img" @click.stop="tapAvater"></cover-image>
					<text class="right-follow" @click="tapFollow(item)">+</text>
					<cover-image
						style="position:relative;top:-20upx;"
						:src="item.is_dianzan ? '/static/yhdsl/dz2.png' : '/static/yhdsl/dz1.png'"
						class="img-left"
						@click.stop="tapLove(item)"
					></cover-image>
					<text class="right-text">{{ item.dianzan }}</text>
					<cover-image src="/static/yhdsl/pl.png" style="height: 80upx;" class="img-left" @click.stop="tapMsg(item)"></cover-image>
					<text class="right-text">{{ item.pinglun }}</text>
					<cover-image src="/static/yhdsl/zf.png" style="height: 76upx;" class="img-left" @click.stop="tapShare(item)"></cover-image>
					<text class="right-text">{{ item.zhuanfa }}</text>
					<cover-image src="/static/yhdsl/car.png" class="carIcon img"></cover-image>
				</cover-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
let play = false;
export default {
	props: {
		video_list: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			play: false,
			show_play: false,
			current_index: 0,
			videoCtx: null
		};
	},
	onReady() {},
	created() {
		setTimeout(() => {
			play = true;
			this.videoPlay();
		}, 1000);
	},
	methods: {
		clickVideo() {
			this.videoPlay();
		},
		videoPlay() { 
			let video_id = this.video_list[this.current_index].video_id;
			this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
			console.log(video_id)
			console.log(play)
			if (play) {
				this.videoCtx.seek(0);
				this.videoCtx.play();
				this.show_play = false;
				play = false;
			} else {
				this.videoCtx.pause();
				this.show_play = true;
				play = true;
			}
		},
		videoPause() {
			this.videoCtx.pause();
			this.show_play = true;
			play = true; 
		},
		changeVideo(e) {
			console.log("changeVideochangeVideo")
			console.log(this.current_index)
			console.log("-----------------")
			// 暂停之前的视频
			this.current_index = e.detail.current;
			// 先重置视频进度，然后播放现在的视频
			this.videoPlay();
			// 判断是否第一条
			if (e.detail.current == 0) {
				console.log('到顶了');
				return false;
			}
			// 判断是否最后一条
			if (e.detail.current == this.video_list.length - 1) {
				console.log('到底了');
				return false;
			}
		},
		tapAvater(item) {
			this.$emit('tapAvater', item);
		},
		tapMsg(item) {
			this.$emit('tapMsg', item);
		},
		tapShare(item) {
			this.$emit('tapShare', item);
		},
		tapFollow(item) {
			this.$emit('tapFollow', item);
		},
		tapLove(item) {
			this.video_list[this.current_index].is_dianzan = !this.video_list[this.current_index].is_dianzan;
			console.log(this.video_list[this.current_index].is_dianzan);
			this.$emit('tapLove', item);
		}
	},
	watch: {
		play(newVal, oldVal) {
			this.videoPlay();
		}
	}
};
</script>

<style scoped>
.swiper {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}
.video {
	width: 100%;
	height: 100%;
	position: relative;
}
.play {
	position: absolute;
	width: 20vw;
	height: 20vw;
	left: 40vw;
	top: 40vh;
	opacity: 0.5;
}

.cover-view-left {
	position: absolute;
	margin-left: 20upx;
	width: 580upx;
	bottom: 110upx;
	z-index: 9999;
	font-size: 14px;
	color: #ffffff;
}
.left-text {
	font-size: 14px;
	color: #ffffff;
}

.cover-view-right {
	position: absolute;
	bottom: 40px;
	right: 30upx;
	z-index: 9999;
	text-align: center;
}

.avator {
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff;
}

.img {
	height: 90upx;
	width: 90upx;
	margin-bottom: 110upx;
}

.img-left {
	width: 80upx;
	height: 66upx;
	padding-left: 4px;
}
.right-follow {
	position: absolute;
	z-index: 100;
	top: 75upx;
	left: 28upx;
	color: #ffffff;
	font-size: 16px;
	width: 34upx;
	height: 34upx;
	background-color: #f12f5b;
	text-align: center;
	line-height: 34upx;
	border-radius: 17upx;
}
.right-text {
	color: #ffffff;
	font-size: 11px;
	text-align: center;
	margin-bottom: 40upx;
}
.carIcon {
	margin-top: 40upx;
}

.view-left-text-content {
	flex: 1;
}
.view-left-text {
	color: #ffffff;
	font-size: 18px;
	margin-bottom: 10upx;
	font-weight: bold;
}
.text-content-text {
	color: #ffffff;
	font-size: 16px;
	line-height: 50upx;
	height: 100upx;
	overflow: hidden;
}
</style>
